<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>提问</title>
	</head>
	<link rel="stylesheet" href="../../css/mui.min.css" />
	<style>
		.headbar {
			background-color: #3ac9af;
		}
		
		.mui-title {
			color: white;
		}
		
		.mui-icon-left-nav {
			color: white;
		}
		.searchdiv{
			margin-top:20px;
		}
		.savebtn {
			margin-top: 12px;
			font-size: 17px;
			color:white;
		}
		/****搜索框****/
		
		.mui-search .mui-placeholder {
			height: 60px;
			padding: 13px 0px 0px 0px;
		}
		
		.mui-search .mui-input-clear {
			background-color: white;
			height: 60px;
			border-radius: 0px;
		}
		
		.mui-input-row.mui-search .mui-icon-clear {
			top: 18px;
		}
		/*******userdiv*******/
		
		.userdiv {
			height: 70px;
			background: white;
		}
		
		.userdiv input {
			margin-top: 15px;
		}
		
		.userdiv label {
			width: 50px;
			height: 60px;
		}
		
		.userdiv img {
			float: left;
			width: 45px;
			height: 45px;
			margin-left: 70px;
			margin-top: 14px;
			border-radius: 23px;
		}
		
		.userdiv .username {
			float: left;
			margin-left: 15px;
			margin-top: 25px;
			color: #555555;
		}
	</style>

	<body>
		<header class="mui-bar mui-bar-nav headbar">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a><a id="savequesbtn" class="mui-pull-right savebtn">确定</a>
			<h1 class="mui-title">提醒谁看</h1>
		</header>
		<div class="mui-content">
			<div class="searchdiv">
				<div class="mui-input-row mui-search">
					<input type="search" class="mui-input-clear" id="searchinput" placeholder="搜索">
				</div>
			</div>
			<div class="usersdiv" id="usersdiv">
				<div class="userdiv">
					<div class="mui-input-row mui-checkbox  mui-left">
						<label></label>
						<input name="checkbox1" value="123" type="checkbox">
						<img data-lazyload="0">
						<span class="username">刘晓娟</span>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../../js/mui.min.js"></script>
	<script src="../../js/mui.lazyload.js"></script>
	<script src="../../js/mui.lazyload.img.js"></script>
	<script src="../../script/config.js"></script>
	<script type="text/javascript" src="../../js/DMobileFrame_DownLoadUtil.js"></script>
	<script>
	    var keyword='';
		var localStorageManagers = require('script/localStorageManagers.js');
		mui.init({
			swipeBack: true
		});
		//加载plusReady
		mui.plusReady(function() {
			plusReady();
		});
		//plusReady
		function plusReady() {
			mui('.userdiv').imageLazyload({
				        placeholder: '../../images/user_guest.png'
			        });
			//保存
			mui('header').on('tap', '#savequesbtn', saveUser);
			//@提醒
			loadUsersDiv();
			//搜索
			mui('.mui-content').on('focusout', '#searchinput', function() {
				keyword = document.getElementById('searchinput').value;
				loadUsersDiv();
			});
		}
		//加载教师
		function loadUsersDiv() {
			document.getElementById('usersdiv').innerHTML = '';
			ajaxLoadUsers();
		}
		//ajax加载
		function ajaxLoadUsers() {
			var userid = localStorageManagers.getUseridSession();
			var url = serverAjax + "/mobile/studycenter/getTeachersByStudentid.do";
			mui.ajax(url, {
				data: {
					userid: userid
				},
				type: 'post',
				dataType: 'json',
				timeout: 10000,
				success: function(data) {
					if (data == null || data.length == 0) return;
					buildUsersDiv(data);
					mui('.userdiv').imageLazyload({
				        placeholder: '../../images/user_guest.png'
			        });
				},
				error: function(e1, e2, e3) {
					console.log(e1);
				}
			});
		}
		//构建usersdiv
		function buildUsersDiv(data) {
			var userids = plus.webview.currentWebview().userids;
			var usersEle = document.getElementById('usersdiv');
			for (var i = 0; i < data.length; i++) {
				if(data[i].userName.indexOf(keyword)<0)continue;
				var ischecked = '';
				if (userids.indexOf(data[i].userID) >= 0) ischecked = 'checked';
				var userstr = '<div class="userdiv">' + '<div class="mui-input-row mui-checkbox  mui-left">' + '<label></label>' + '<input name="checkbox1" ' + ischecked + ' value="' + data[i].userID + '" username="' + data[i].userName + '" type="checkbox">' + '<img data-lazyload="'+data[i].userpath+'">' + '<span class="username">' + data[i].userName + '&nbsp;&nbsp;(老师)</span>' + '</div>' + '</div>';
				usersEle.innerHTML = usersEle.innerHTML + userstr;
			}
		}
		//saveUser
		function saveUser() {
			var userids = '';
			var usernames = '';
			var inputcs = document.getElementsByTagName('input');
			for (var i = 0; i < inputcs.length; i++) {
				var inputc = inputcs[i];
				if (inputc.checked) {
					userids += inputc.value + ',';
					usernames += inputc.getAttribute('username') + ',';
				}
			}
			if (usernames.length > 0)
				usernames = usernames.substring(0, usernames.length - 1);
			if (userids.length > 0) {
				userids = userids.substring(0, userids.length - 1);
			} else {
				mui.toast('请选择需要@的教师');
				return;
			}
			mui.back();
			//调用父界面方法
			var parentWebView = plus.webview.getWebviewById("selfcenter/question/addquestion");
			parentWebView.evalJS("setAtDiv('" + userids + "','" + usernames + "')");
		}
	</script>

</html>